<template>
	<view>
		<!-- 这是头部搜索部分 -->
		<view class="header">
			<view class="choose">
				<view :class="{active:current==='分类'}" @tap="change('分类')">
					分类
				</view>
				<view :class="{active:current==='食材'}" @tap="change('食材')">
					食材
				</view>
			</view>
			<view class="headerInput">
				<input type="text" placeholder="想吃什么搜这里,如麻婆豆腐" />
			</view>
		</view>
		<view class="main">
			<!-- 左滑块 -->
			<scroll-view scroll-y class="aside" :scroll-into-view="scrollViewId">
				<view class="title" v-for="(item,index) in fenleiData" :key="index" :class="{actives:check1===index}"
					@tap="Click(index)">
					{{item.cat_name}}
				</view>
			</scroll-view>
			<!-- 右滑块  -->
			<scroll-view scroll-y class="container" @scroll="scroll" :scroll-into-view="scrollViewId">
				<view v-for="(item,index) in fenleiData" :key="item._id" :id="'t'+index" class="box">
					<view class="container-tips">{{item.cat_name}}</view>
					<view class="container-list">
						<ul v-for="(item1,index) in item.children" :key="item1.cat_id">
							<li class="imageLi">
								<image src="../../../static/images/jiachangcai@3x.png" mode=""></image>
								<!-- <image :src="item1.cat_icon" mode=""></image> -->
							</li>
							<li class="name">{{item1.cat_name}}</li>
						</ul>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: "分类",
				check1: 0,
				fenleiData: [],
				scrollViewId: "",
				boxHeight: [0], //所有盒子的高度
			}
		},
		onLoad() {
			this.getFenleiData();
		},
		methods: {
			//点击切换分类食材
			change(name) {
				this.current = name;

			},
			//点击查看对应的主分类
			Click(index) {
				this.check1 = index;
				this.scrollViewId = "t" + index;
			},
			//获取分类信息
			async getFenleiData() {
				const res = await this.$request({
					url: '/categories'
				})
				if (res.meta.status === 200) {
					this.fenleiData = res.message;
					this.check = res.message[0]._id;
					this.$nextTick(function() {
						this.getBoxHeight();
					})
				}
			},
			//动态获取所有页面的盒子高度
			getBoxHeight() {
				const query = uni.createSelectorQuery().in(this);
				query.selectAll(".box").boundingClientRect(data => {
					console.log(data); //获取了所有的box的高度,保存在数组中
					data.map(item => { //添加进数组中
						this.boxHeight.push(item.top);
					})
				}).exec();

			},
			scroll(e) {
				// console.log(e.detail.scrollTop);//当前的高度
				let nowTop = e.detail.scrollTop;
				for (let i = 0; i < this.boxHeight.length; i++) {
					if (nowTop > this.boxHeight[i] && nowTop < this.boxHeight[i + 1]) { //对比当前的高度然后设置对应的class
						this.check1 = i;
					}
				}
			}
		}
	}
</script>

<style scoped>
	/* 这是头部部分 */
	.header {
		height: 150rpx;
		background-color: #ee8131;
	}

	.choose {
		width: 378rpx;
		height: 48rpx;
		background-color: #ef7d2b;
		border-radius: 28rpx;
		border: solid 1rpx #ffffff;
		margin: 0 auto;
		box-sizing: border-box;
		display: flex;
		margin-bottom: 24rpx;
	}

	.choose view {
		width: 50%;
		height: 48rpx;
		font-size: 24rpx;
		text-align: center;
		line-height: 48rpx;
		color: #FFFFFF;
	}

	.choose .active {
		border-radius: 28rpx;
		color: #ef7d2b;
		background-color: #FFFFFF;
	}

	.headerInput {
		width: 692rpx;
		height: 60rpx;
		margin: 0 auto;
	}

	.headerInput input {
		width: 692rpx;
		height: 60rpx;
		background-color: #f1f1f1;
		border-radius: 16rpx;
		font-size: 24rpx;
		text-align: center;
	}

	/* 这是滑块部分 */
	.main {
		height: calc(100vh - 150rpx);
		display: flex;
	}

	.aside {
		width: 200rpx;
		background-color: #FFFFFF;
		height: calc(100vh - 150rpx);
	}

	.title {
		width: 190rpx;
		height: 108rpx;
		line-height: 108rpx;
		text-align: center;
		border-left: 10rpx solid transparent;
		font-size: 28rpx;
	}

	.actives {
		background-color: #F8F8F8;
		border-left: 10rpx solid #ee8131;
		color: #ee8131;
	}

	.container {
		width: 550rpx;
		height: calc(100vh - 150rpx);
		box-sizing: border-box;
		padding: 20rpx 30rpx;
	}

	.container-tips {
		box-sizing: border-box;
		font-size: 24rpx;
		color: #CCCCCC;
	}

	.container-list {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 20rpx;
		/* justify-content: space-around; */
	}

	.container-list ul {
		width: 130rpx;
		margin: 0;
		padding: 0;
		margin: 15rpx;

	}

	.imageLi image {
		width: 120rpx;
		height: 100rpx;
	}

	.name {
		font-size: 20rpx;
		color: #CCCCCC;
		text-align: center;
	}

	/* 隐藏滚动条 */
	scroll-view ::-webkit-scrollbar {
		width: 0;
		height: 0;
		background-color: transparent;
	}
</style>
